<template>
	<view class="material">
		<uni-card  :is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'0 20rpx'" :padding="'0 20rpx'">
			<view class="material-img" @click="upload">
				<image class="img" :src="valiFormData.avatar" ></image>
				<image class="img1" :src="imgUrl" mode="aspectFit"></image>
			</view>
		   <uni-forms ref="valiForm" :recruits="rules" :modelValue="valiFormData">
			   <uni-forms-item label="姓名" name="real_name">
			   	<uni-easyinput :clearable="false" :inputBorder="false" v-model="valiFormData.real_name" placeholder="请输入姓名" trim="both" />
			   </uni-forms-item>
			   <uni-forms-item label="手机号" required name="phone">
			   	<uni-easyinput :clearable="false" type="number" :inputBorder="false" v-model="valiFormData.phone" placeholder="请输入手机号" trim="both" />
			   </uni-forms-item>
			</uni-forms>
		</uni-card>
		<view class="butt">
			<button class="but" plain @click="submit('valiForm')">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				imgUrl:`${getApp().globalData.imgScr}jd/xiangche.png`,
				imageStyles: {
					width: '200r',
					height: '200r',
					border: {
						radius: '50%'
					}
				},	
				valiFormData:{
					real_name:'',
					phone:'',
					avatar: ''
				},
				rules: {
					real_name: {
						recruits: [{
							required: true,
							errorMessage: '昵称不能为空'
						}]
					},
				},
			}
		},
		onLoad(e){
			this.getData()
		},
		methods: {
			/**
			 * 上传头像
			 */
			upload() {
				let _this = this
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        // 获取的格式是数组，多选会同时返回，单选只返回一项
						if(chooseImageRes.tempFiles[0].size > 1024 * 1024 * 10) return uni.showToast({
									title: '请选择 10M 以内的图片！',
									icon:"none"
								})
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						_this.avatar = tempFilePaths[0]
				        // // 若多选，需循环调用uni.uploadFile ，因微信小程序只支持单文件上传
				        uni.uploadFile({
				             url: 'https://www.zhuoxianrenli.cn/index/hotelindex/uploadImage', //仅为示例，非真实的接口地址
				           // url: 'http://baseadmin.ixiaoquan.live/index/hotelindex/uploadImage', //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
						header: {
						"Content-Type": "multipart/form-data",
						},
				            success: (uploadFileRes) => {
				                // 根据接口具体返回格式   赋值具体对应url
								_this.valiFormData.avatar = `${getApp().globalData.url}`+'uploads/' + JSON.parse(uploadFileRes.data).file
				            },
							fail:(e) => {
								uni.showToast({
									title: e.errMsg,
									icon:"none"
								})
							}
				        });
				    }
				});
			},
			/**
			 * 提交按钮
			 */
			async submit(ref) {
				const params = this.valiFormData
				this.$http.post('/index/Login/update_userinfo', params).then(res => {
					uni.showToast({
						title: '提交成功'
					})
					setTimeout(function(){
						uni.navigateBack(1)
					},1000)
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						icon: "none"
					})
				})
				// let _this = this
				// try {
				// 	let res = await this.$refs[ref].validate()
				// 	if(uni.getStorageSync('avatarUrl') == res.avatarUrl && uni.getStorageSync('nickName') == res.name){
				// 		uni.switchTab({
				// 		    url: '/pages/tag/my/my'
				// 		})
				// 	}else {
				// 		let data = await this.$http.post('/index/Login/update_userinfo',{
				// 			real_name:res.name,
				// 			avatar:res.avatarUrl
				// 		})
				// 		uni.showToast({
				// 			icon:"none",
				// 			title:"修改成功",
				// 			success() {
				// 				setTimeout(()=>{
				// 					uni.switchTab({
				// 					    url: '/pages/tag/my/my'
				// 					})
				// 				},600)
				// 			}
				// 		})
				// 	}
					
					
				// }catch (err) {
				// 	if(err.length > 0) {
				// 		uni.showToast({
				// 			title: err[0].errorMessage,
				// 			icon:"none"
				// 		})
				// 	} else if(err.errMsg){
				// 		uni.showToast({
				// 			title: err.errMsg,
				// 			icon:"none"
				// 		})
				// 	}
				// }
			},
			async getData() {
				try{
					let res = await this.$http.post('/index/Login/userinfo')
					this.valiFormData.real_name = res.real_name || ''
					this.valiFormData.phone = res.phone
					this.valiFormData.avatar = res.avatar[0]
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title:e.errMsg,
						icon:"none"
					})
				}
			}
		},
	}
</script>

<style lang="scss">
.material {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100vh;
	.uni-card {
		border-radius: 20rpx;
	}
	.material-img {
		position: relative;
		display: flex;
		justify-content: center;
		margin: 60rpx 0;
		.img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 100rpx;
			border: 0;
			overflow: hidden;
		}
		.img1 {
			position: absolute;
			bottom: 0;
			right: 50%;
			transform: translateX(100rpx);
			width: 56rpx;
			height: 56rpx;
			border: 0;
			border-radius: 28rpx;
			overflow: hidden;
		}
	}
	.butt {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 80rpx;
		margin-bottom: 40rpx;
		.but {
			flex: 1;
			background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
			border-radius: 40rpx;
			line-height: 80rpx;
			font-size: 34rpx;
			font-weight: 600;
			color: #FFFFFF;
			border: 0;
			margin: 0 20rpx;
		}
	}
}
.uni-easyinput{
	text-align: right !important;
}
</style>
